<template>
    <div>
        <!-- 查询表单 -->
        <el-form
            :model="searchForm"
            label-width="80px"
            :inline="true"
            size="small"
        >
            <el-form-item label="商品名称">
                <el-input v-model="searchForm.GoodsName"></el-input>
            </el-form-item>

            <el-form-item label="商品分类">
                <el-select
                    v-model="OneCategoryValue"
                    @change="chooseOneCategory"
                >
                    <el-option
                        v-for="item in OneCategoryOptions"
                        :key="item.Value"
                        :label="item.Text"
                        :value="item.Value"
                    />
                </el-select>
                <el-select
                    v-model="TwoCategoryValue"
                    @change="chooseTwoCategory"
                >
                    <el-option
                        v-for="item in TwoCategoryOptions"
                        :key="item.Value"
                        :label="item.Text"
                        :value="item.Value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="handleSearch"
                    >查询</el-button
                >
                <el-button icon="el-icon-delete" @click="handleClear"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <avue-crud
            ref="crud"
            :option="tableOption"
            :data="list"
            :page="page"
            v-model="form"
            :table-loading="listLoading"
            @on-load="getList"
            @size-change="sizeChange"
            @current-change="currentChange"
            @selection-change="selectionChange"
            @selectAll="selectAll"
        >
            <template slot="ImgUrl" slot-scope="scope">
                <img
                    :src="baseUrl + scope.row.ImgUrl"
                    alt="商品图片"
                    style="width: 50px; height: 50px"
                />
            </template>
            <template slot="menuLeft">
                <el-button
                    :disabled="selectIds.length <= 0"
                    v-if="business_btn_up && status == 3"
                    class="filter-item"
                    type="primary"
                    icon="el-icon-upload2"
                    @click="handleBatchUp"
                    >批量上架
                </el-button>
                <el-button
                    :disabled="selectIds.length <= 0"
                    v-if="business_btn_down && status == 1"
                    class="filter-item"
                    type="primary"
                    icon="el-icon-download"
                    @click="handleBatchDown"
                    >批量下架
                </el-button>
                <el-button
                    :disabled="selectIds.length <= 0"
                    v-if="business_btn_delete"
                    class="filter-item"
                    type="primary"
                    icon="el-icon-delete"
                    @click="handleBatchDelete"
                    >批量删除
                </el-button>
            </template>

            <template slot="menu" slot-scope="scope">
                <el-button
                    v-if="business_btn_reason && status == 2"
                    type="text"
                    size="small"
                    icon="el-icon-view"
                    @click="openReasonDialog(scope.row)"
                    >查看原因
                </el-button>
                <el-button
                    v-if="business_btn_update"
                    type="text"
                    size="small"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row.Id)"
                    >编辑
                </el-button>
                <el-button
                    v-if="business_btn_up && status == 3"
                    type="text"
                    size="small"
                    icon="el-icon-upload2"
                    @click="handleUp(scope.row)"
                    >上架
                </el-button>
                <el-button
                    v-if="business_btn_down && status == 1"
                    type="text"
                    size="small"
                    icon="el-icon-download"
                    @click="handleDown(scope.row)"
                    >下架
                </el-button>
                <el-button
                    v-if="business_btn_delete"
                    type="text"
                    size="small"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                    >删除
                </el-button>
            </template>
        </avue-crud>

        <el-dialog
            title="编辑商品"
            :visible.sync="updateDialogVisible"
            width="70%"
            @close="closeUpdateDialog"
        >
            <update-product :id="productId" @closeUpdateBox="closeUpdateBox" @preview="preview"/>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateDialogVisible = false"
                    >关 闭</el-button
                >
            </span>
        </el-dialog>

        <el-dialog
            title="预览"
            :visible.sync="PreviewDialogVisible"
            width="70%"
            @close="handleClosePreview">
            <preview-product :preview-data="previewData" :change="previewChange"/>
            <span slot="footer" class="dialog-footer">
                <el-button @click="PreviewDialogVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="商品未通过原因"
            :visible.sync="reasonDialogVisible"
            width="30%"
            :before-close="reasonDialogClose"
        >
            <div style="margin-bottom: 10px">
                原因描述：{{ reasonData.CheckRemark }}
            </div>
            <div>
                相关图片：
                <img
                    v-for="img in reasonData.CheckImgUrls"
                    :src="img ? baseUrl + img : ''"
                    alt=""
                    style="width: 100px; height: 100px"
                />
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="reasonDialogVisible = false"
                    >关 闭</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import PreviewProduct from "../components/previewProdcut";
import setting from "@/setting";
import { tableOption } from "@/const/crud/businessProduct/productContent";
import { mapGetters } from "vuex";
import productManageApi from "@/api/businessProduct/productManagement";
import UpdateProduct from "./updateProduct.vue";
import { money } from "@/util/util";
export default {
    name: "productContent",
    components: { UpdateProduct,PreviewProduct },
    props: {
        status: {
            type: Number,
            default: 0,
        },
        active: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            baseUrl: setting.apiUrl,
            productId: null,
            updateDialogVisible: false,
            reasonDialogVisible: false,
            tableOption: tableOption,
            OneCategoryOptions: [],
            OneCategoryValue: "",
            TwoCategoryOptions: [],
            TwoCategoryValue: "",
            searchForm: {
                ShopId: "1001",
                GoodsTypeId: null,
                GoodsName: null,
                StatusList: [],
            },
            total: 0,
            page: {
                total: 0,
                currentPage: 1,
                pageSize: 20,
            },
            list: [],
            listLoading: false,
            form: {},
            business_btn_reason: true,
            business_btn_up: true,
            business_btn_down: true,
            business_btn_delete: true,
            business_btn_update: true,
            selectIds: [],
            reasonData: {},
            PreviewDialogVisible:false,
            previewChange:false,
            previewData:{}
        };
    },

    computed: {
        ...mapGetters(["elements", "permissions"]),
    },
    watch: {
        active(newValue, oldValue) {
            this.getList(this.page);
        },
    },
    created() {
        this.getCategoryList("0", "OneCategoryOptions");
        this.searchForm.StatusList = [this.status];
    },
    methods: {
        preview(flag,data) {
            if(flag) {
                this.previewChange = true;
                this.previewData = data
                console.log(111,this.previewData);
                this.PreviewDialogVisible = true;
            }else{
                this.PreviewDialogVisible = false;
                this.previewChange = true;
            }
        },
        // 关闭预览
        handleClosePreview() {
            this.previewChange = false
        },
        // 编辑完成关闭弹框
        closeUpdateBox(data) {
            this.updateDialogVisible = data;
        },
        // 获取商品分类列表
        getCategoryList(id, option) {
            let _dataJson = {
                ParentId: id,
                SelectId: "",
            };
            productManageApi
                .getCategory(_dataJson)
                .then(({ data: res }) => {
                    if (res.code === 0) {
                        this[option] = res.data;
                    } else {
                        return false;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 选择一级分类
        chooseOneCategory(data) {
            if (data) {
                this.OneCategoryValue = data;
                this.getCategoryList(
                    this.OneCategoryValue,
                    "TwoCategoryOptions"
                );
            }
            this.TwoCategoryValue = "";
        },
        // 选择二级分类
        chooseTwoCategory(data) {
            this.TwoCategoryValue = data;
        },
        // 获取表格数据
        getList(page) {
            if (this.active) {
                this.listLoading = true;
                let _temp = Object.assign(
                    {
                        page: page.currentPage,
                        limit: page.pageSize,
                    },
                    this.searchForm
                );
                productManageApi
                    .getProductList(_temp)
                    .then(({ data: res }) => {
                        // console.log(res);
                        if (res.code === 0) {
                            this.list = res.data.Data;
                            this.page.total = res.data.Cnt;
                        }
                        this.listLoading = false;
                    })
                    .catch((err) => {
                        console.log(err);
                        this.listLoading = false;
                    });
            }
        },
        // 查询
        handleSearch() {
            this.searchForm.GoodsTypeId =
                this.TwoCategoryValue || this.OneCategoryValue;
            this.page.page = 1;
            this.getList(this.page);
        },
        // 修改size
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        // 修改page
        currentChange(current) {
            this.page.currentPage = current;
        },
        // 重置查询表单
        handleClear() {
            this.searchForm.GoodsTypeId = null;
            this.searchForm.GoodsName = null;
            this.OneCategoryValue = "";
            this.TwoCategoryValue = "";
        },
        // 刷新页面
        refreshChange() {
            this.getList(this.page);
        },
        // 点击编辑
        handleUpdate(id) {
            // console.log(id);
            this.updateDialogVisible = true;
            this.productId = id;
        },
        // 关闭编辑弹框
        closeUpdateDialog() {
            this.productId = "";
        },
        // 点击弹框确定
        handleSure() {
            updateDialogVisible = false;
        },
        // 选择
        selectionChange(selection) {
            this.selectIds = [];
            selection.forEach((item) => {
                this.selectIds.push(item.Id);
            });
        },
        // 全选
        selectAll(selection) {
            this.selectIds = [];
            selection.forEach((item) => {
                this.selectIds.push(item.Id);
            });
        },
        // 删除
        handleDelete(row) {
            this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let _dataJson = {
                        GoodsIds: [row.Id],
                        Status: 5,
                    };
                    productManageApi
                        .PutStatus(_dataJson)
                        .then(({ data: res }) => {
                            // console.log(res);
                            if (res.code === 0) {
                                this.$message.success("删除成功");
                                this.getList(this.page);
                            } else {
                                return this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                })
                .catch(() => {});
        },
        // 批量删除
        handleBatchDelete() {
            this.$confirm("此操作将永久删除这些商品, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let _dataJson = {
                        GoodsIds: this.selectIds,
                        Status: 5,
                    };
                    productManageApi
                        .PutStatus(_dataJson)
                        .then(({ data: res }) => {
                            // console.log(res);
                            if (res.code === 0) {
                                this.$message.success("删除成功");
                                this.getList(this.page);
                            } else {
                                return this.$message.error(res.msg);
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                })
                .catch(() => {});
        },
        // 下架
        handleDown(row) {
            let _dataJson = {
                GoodsIds: [row.Id],
                Status: 3,
            };
            productManageApi
                .PutStatus(_dataJson)
                .then(({ data: res }) => {
                    // console.log(res);
                    if (res.code === 0) {
                        this.$message.success("下架成功");
                        this.getList(this.page);
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 批量下架
        handleBatchDown() {
            let _dataJson = {
                GoodsIds: this.selectIds,
                Status: 3,
            };
            productManageApi
                .PutStatus(_dataJson)
                .then(({ data: res }) => {
                    // console.log(res);
                    if (res.code === 0) {
                        this.$message.success("下架成功");
                        this.getList(this.page);
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        // 上架
        handleUp(row) {
            let _dataJson = {
                GoodsIds: [row.Id],
                Status: 1,
            };
            productManageApi
                .PutStatus(_dataJson)
                .then(({ data: res }) => {
                    // console.log(res);
                    if (res.code === 0) {
                        this.$message.success("上架成功");
                        this.getList(this.page);
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 批量上架
        handleBatchUp(row) {
            let _dataJson = {
                GoodsIds: this.selectIds,
                Status: 1,
            };
            productManageApi
                .PutStatus(_dataJson)
                .then(({ data: res }) => {
                    // console.log(res);
                    if (res.code === 0) {
                        this.$message.success("上架成功");
                        this.getList(this.page);
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 关闭原因弹框
        reasonDialogClose() {
            this.reasonData = {};
        },
        // 查看未通过原因
        openReasonDialog(row) {
            let _dataJson = {
                Ids: [row.Id],
            };
            productManageApi
                .getReason(_dataJson)
                .then(({ data: res }) => {
                    if (res.code === 0) {
                        this.reasonData = res.data[0];
                        this.reasonDialogVisible = true;
                        // console.log(this.reasonData);
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>

<style lang="scss" scoped>
</style>